<template>
  <view>
    <my-layout
      ref="my-layout"
      :tabbar-is-show="false"
      :is-absolute-body="false"
    >
      <template #Navbar>
        <view
          style="
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            position: relative;
          "
        >
          <image
            @click="goback()"
            :src="indexTabBarUrl.navigateBack"
            style="width: 30rpx; height: 30rpx; margin-left: 40rpx"
          />
          <view
            style="
              font-weight: bold;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translateX(-50%) translateY(-50%);
            "
            >微短剧</view
          >
        </view>
      </template>
      <template #Body>
        <view
          style="
            background-color: #f8f8f8;
            width: 100%;
            height: 100%;
            padding: 30rpx;
            box-sizing: border-box;
          "
        >
          <scroll-view
            :scroll-y="true"
            :enhanced="true"
            :show-scrollbar="false"
            style="width: 100%; height: 100%"
          >
            <view style="display: flex; flex-direction: column; row-gap: 24rpx">
              <view
                class="short_play_item"
                v-for="(spsitem, spskey) in shortList"
                :key="spskey"
              >
                <view class="short_play_lef">
                  <image class="short_fm" :src="spsitem.cover[0]"></image>
                  <view class="short_satrt">
                    <image
                      src="http://llg.qiniu.comeinvip.com/images/short_ico.png"
                    ></image>
                    <text>96万播放</text>
                  </view>
                </view>
                <view class="short_play_rig">
                  <view class="short_info">
                    <text class="short_title">{{ spsitem.name }}</text>
                    <text class="short_font">{{ spsitem.introduce }}</text>
                  </view>
                  <view class="short_pnum">
                    <text>喜剧</text>
                    <image
                      src="http://llg.qiniu.comeinvip.com/images/diandian.png"
                      style="width: 8rpx; height: 8rpx"
                    ></image>
                    <text>40集</text>
                  </view>
                  <view @click="playbackBtn(spsitem.id)" class="short_go"
                    ><text>立即观看</text></view
                  >
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </template>
    </my-layout>
  </view>
</template>

<script>
import util from "@/utils/util.js";
import navBar from "@/components/navbar/navbar.vue";
import configApi from "@/utils/config.js";
import indexTabBarUrl from "@/url/index_tabBar";
export default {
  components: {
    "nav-bar": navBar,
  },
  data() {
    return {
      indexTabBarUrl,
      isIphoneX: false,
      navbarData: {
        // 头部组件所需参数
        showCapsule: 2, //是否显示左上角返回图标   1表示白色显示    0表示不显示 2黑色
        positionShow: 1, //0不显示定位 1 显示定位
        backgroundCor: 2, //0 无背影色 1首页背景颜色   2白色
        statusBarHeight: uni.getSystemInfoSync()["statusBarHeight"],
        navHeight: 45,
        titles: "微短剧",
      },
      shortList: [],
      pages: 1,
    };
  },
  async onLoad() {
    // 获取手机系统信息
    const info = uni.getSystemInfoSync();
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.navbarData.navHeight =
      menuButtonInfo.bottom -
      info.statusBarHeight +
      (menuButtonInfo.top - info.statusBarHeight);

    try {
      this.$refs["my-layout"].openLoading();
      //短剧列表
      let data = {
        page: this.pages,
      };
      let shortListPagination = await configApi.getshortPlay(data);
      this._.forEach(shortListPagination.data, (item) => {
        item.cover = JSON.parse(item.cover).map((item) => item.url);
      });
      this.shortList = shortListPagination.data;
      this.$refs["my-layout"].closeLoading();
    } catch (error) {
      this.$refs["my-layout"].closeLoading();
      wx.showToast({
        title: "网络异常",
        icon: "error",
        mask: true,
      });
    }
  },
  methods: {
    playbackBtn(id) {
      uni.navigateTo({
        url: "/pages/content/shortPlayback/shortPlayback?id=" + id,
      });
    },
    goback() {
      uni.navigateBack();
    },
  },
  created() {
    this.isIphoneX = util.getSystemInfoForPhone(); // 判断手机机型是否为iPhone X以上
  },
};
</script>

<style>
@import url("@/static/css/contents.css");
.navpos {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  width: 750rpx;
}
</style>
